import { View, Image } from '@tarojs/components';
import s from './index.module.scss'
import classNames from 'classnames';
import { useState } from 'react';

const __card = [{
  src: 'cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/liuying.jpg',
  name: '流萤'
}, {
  src: 'cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/keli.jpg',
  name: '可莉'
}, {
  src: 'cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/huohuo.jpg',
  name: '藿藿'
}]
export default function Index() {
  const [active, setActive] = useState(false)
  const [current, setCurrent] = useState(-1)
  const __blur = classNames(s.card, {
    [s.blur]: active
  })

  return (
    <View className={s.wrapper}>
      <View className={s.cards}>
        {__card.map((item, index) => (
          <View className={s.container}>
            <Image
              className={current == index ? `${s.card} ${s.highlight}` : __blur}
              onClick={() => {
                if (current === index) {
                  setCurrent(-1)
                  setActive(false)
                } else {
                  setCurrent(index)
                  setActive(true)
                }
              }}
              src={item.src}
              mode='aspectFill'
            />
            <View className={s.name}>{item.name}</View>
          </View>
        ))}
      </View>
    </View>
  )
}